import React from 'react';
import { connect } from 'dva';
import styles from './index.less';
import { Form, Icon, Input, Button, Checkbox, } from 'antd';
import { formatMessage } from 'umi/locale';

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class LoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'login/login',
          payload: {
            ...values,
          },
        });
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { submitting } = this.props;
    return (
      <div className={styles.main}>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item>
            {getFieldDecorator('username', {
              rules: [{ required: true, message: formatMessage({ id: 'validation.userName.required' }) }],
            })(
              <Input name="username" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large"
                placeholder={formatMessage({ id: 'app.login.userName' })} />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: formatMessage({ id: 'validation.password.required' }) }],
            })(
              <Input name="password" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} size="large" type="password"
                placeholder={formatMessage({ id: 'app.login.password' })} />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(
              <Checkbox name="remenber">{formatMessage({ id: 'app.login.remember-me' })}</Checkbox>
            )}
          </Form.Item>
          <Form.Item>
            <Button loading={submitting} type="primary" size="large" htmlType="submit" className={styles['login-form-button']}>
              {formatMessage({ id: 'app.login.login' })}
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Form.create()(LoginForm);